<template>
    <div class="tool-container">
        <div class="left animate__animated animate__fadeInUp">
            <img :src="require('@/assets/images/tool_left_title.png')" />
        </div>
        <div class="right">
            <div class="r_item animate__animated animate__fadeInRight">
                <div class="card_img">
                    <img
                        :src="require('@/assets/images/tool_right_img01.jpg')"
                    />
                </div>
                <div class="caption">价格追踪</div>
                <div class="sub_title">
                    预测产品大类价格走势<br />正视原材料价格波动
                </div>
                <div class="more_icon"><i class="el-icon-right"></i></div>
            </div>
            <div
                class="r_item animate__animated animate__fadeInRight"
                v-for="item in cardInfo"
                :key="item.id"
            >
                <div class="card_img">
                    <img :src="item.imgUrl" />
                </div>
                <div class="caption">{{ item.title }}</div>
                <div class="sub_title">{{ item.desc }}</div>
                <div class="more_icon"><i class="el-icon-right"></i></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Tool",
    data() {
        return {
            cardInfo: [
                // {
                //     id: 1,
                //     imgUrl: require("@/assets/images/tool_right_img01.jpg"),
                //     title: "价格追踪",
                //     desc: "预测产品大类价格走势正视原材料价格波动",
                // },
                {
                    id: 2,
                    imgUrl: require("@/assets/images/tool_right_img02.jpg"),
                    title: "可视化工具",
                    desc: "大厂配货可视小厂物流可寻",
                },
                {
                    id: 3,
                    imgUrl: require("@/assets/images/tool_right_img03.jpg"),
                    title: "比价工具",
                    desc: "灵活询价比价推动良性竞争",
                },
            ],
        };
    },
};
</script>

<style lang="less" scoped>
@import "~@/assets/css/mixin.less";
.tool-container {
    color: #ffffff;
    .main-bg();
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 30px;
    position: relative;
    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("~@/assets/images/tool_bg.jpg") top left no-repeat;
        background-size: 100% 100%;
        z-index: 1;
    }
    .left {
        height: 100%;
        margin-right: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 50px;
        z-index: 2;
        img {
            display: block;
            width: 100%;
            height: auto;
        }
    }
    @media screen and (min-width: 1365px) {
        .left {
            width: 35%;
        }
    }
    @media screen and (max-width: 1366px) {
        .left {
            width: 25%;
        }
    }
    .right {
        display: flex;
        justify-content: space-between;
        width: 760px;
        flex: 1;
        z-index: 2;
        margin: 50px 0;
        .r_item {
            width: 240px;
            box-sizing: border-box;
            height: 100%;
            background-color: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
            transition-duration: 0.4s;
            cursor: pointer;
            &:nth-child(2) {
                animation-delay: 0.2s;
            }
            &:nth-child(3) {
                animation-delay: 0.3s;
            }
            &:hover {
                box-shadow: 0 0 10px #198dff;
                .btn {
                    height: 30px;
                    line-height: 30px;
                    color: #ffffff;
                    transform: translateY(-2px);
                    box-shadow: 0 0 5px #198dff;
                    background-image: linear-gradient(
                        to right,
                        #198dff,
                        #4dc3ff
                    );
                    border: 0;
                }
            }
            .card_img {
                width: 200px;
                height: 150px;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .caption {
                font-size: 16px;
                color: #222222;
                font-weight: 600;
                margin: 20px 0;
            }
            .sub_title {
                font-size: 16px;
                color: #98a5b2;
                height: 60px;
                vertical-align: middle;
                text-align: center;
                line-height: 30px;
                margin-bottom: 30px;
            }
            .more_icon {
                .hollow-btn();
                padding: 0 40px;
            }
        }
    }
    @media screen and (min-width: 1365px) {
        .right {
            margin: 50px 0;
            .r_item {
                padding: 15px 20px 40px;
            }
        }
    }
    @media screen and (max-width: 1366px) {
        .right {
            margin: 10px 0;
            .r_item {
                padding: 15px 20px;
            }
        }
    }
}
</style>